<template>
    <view class="app-container user">
        <view class="user-hinten" :style="{ paddingTop: `${statusBarHeight}px` }">
            <u-gap height="104"></u-gap>
        </view>
        <z-paging ref="paging" refresher-only @onRefresh="onRefresh">
            <template #top>
                <up-navbar title="" :placeholder="true" bgColor="transparent">
                    <template #left></template>
                </up-navbar>
            </template>
            <view class="user-bg">
                <view class="user-header flexrow">
                    <view class="avatar flexrow">
                        <image class="img" src="/static/images/avatar.png" mode="aspectFill"></image>
                    </view>
                    <view class="text">
                        <text class="name">{{ company }}</text>
                        <text class="tel">{{ address }}</text>
                    </view>
                </view>
                <view class="bg"></view>
            </view>
            <view class="user-flex flexrow">
                <view class="item flexcolumn">
                    <text class="label">已售/个</text>
                    <text class="value">{{ sellTotal }}</text>
                </view>
                <view class="item flexcolumn">
                    <text class="label">在租/个</text>
                    <text class="value">{{ rentingTotal }}</text>
                </view>
                <view class="item flexcolumn">
                    <text class="label">押金/元</text>
                    <text class="value">{{ convertFenToYuan(depositTotal) }}</text>
                </view>
            </view>
            <view class="user-title">
                <text class="tit">其他</text>
            </view>
            <view class="user-menu flexrow">
                <view class="item flexcolumn" @tap="linkto('/pages/user/personal')">
                    <image class="img" src="/static/images/user/yg.png" mode="aspectFill"></image>
                    <text class="txt">员工管理</text>
                </view>
                <view class="item flexcolumn" @tap="linkto('/pages/user/client')">
                    <image class="img" src="/static/images/user/custom.png" mode="aspectFill"></image>
                    <text class="txt">客户管理</text>
                </view>
                <view class="item flexcolumn" @tap="linkto('/pages/user/info')">
                    <image class="img" src="/static/images/user/info.png" mode="aspectFill"></image>
                    <text class="txt">实时信息</text>
                </view>
                <view class="item flexcolumn" @tap="linkto('/pages/user/balance')" v-if="mainUser">
                    <image class="img" src="/static/images/user/blance.png" mode="aspectFill"></image>
                    <text class="txt">我的余额</text>
                </view>
                <view class="item flexcolumn" @tap="linkto('/pages/user/qrcode')">
                    <view class="image flexrow">
                        <view class="imgbox flexrow">
                            <image class="img img2" src="/static/images/user/qrcode.png" mode="aspectFill"></image>
                        </view>
                    </view>
                    <text class="txt">二维码</text>
                </view>
                <view class="item flexcolumn" @tap="linkto('/pages/user/setting')">
                    <image class="img" src="/static/images/user/more.png" mode="aspectFill"></image>
                    <text class="txt">我的设置</text>
                </view>
            </view>
        </z-paging>
        <zzk-tabbar :index="2"></zzk-tabbar>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import { merchantInfo } from '@/api/user.js'
import { linkto, convertFenToYuan } from '@/utils/util'

const store = useStore()
const statusBarHeight = computed(() => store.state.common.statusBarHeight)
const address = computed(() => store.state.user.address)
const company = computed(() => store.state.user.company)
const sellTotal = computed(() => store.state.user.sellTotal)
const rentingTotal = computed(() => store.state.user.rentingTotal)
const depositTotal = computed(() => store.state.user.depositTotal)
const mainUser = computed(() => store.state.user.mainUser)

const paging = ref(null)

onLoad(() => {
    uni.hideTabBar()
})

const onRefresh = () => {
    merchantInfo().then(res => {
        store.commit('user/setParams', {
            company: res.companyName,
            address: res.address,
            sellTotal: res.sellTotal,
            rentingTotal: res.rentingTotal,
            depositTotal: res.depositTotal,
            balance: res.balance,
            rentable: res.rentable,
            marketable: res.marketable
        })
        paging.value.complete()
    })
}
</script>

<style lang="scss" scoped>
.user {
    background-image: linear-gradient(to bottom, #fff, #f8f8f8);
    &-hinten {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        background-color: $u-error;
        z-index: 0;
        padding-bottom: 160rpx;
        border-bottom-left-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
    }
    &-bg {
        background-color: $u-error;
        padding-bottom: 160rpx;
        border-bottom-left-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        position: relative;
        z-index: 1;
        overflow: hidden;
        .bg {
            width: 400rpx;
            height: 400rpx;
            background-image: url('/static/images/bg.png');
            background-size: cover;
            opacity: 0.1;
            position: absolute;
            bottom: -80rpx;
            right: -80rpx;
        }
    }
    &-header {
        padding: 0 40rpx;
        align-items: center;
        .avatar {
            width: 120rpx;
            height: 120rpx;
            background-color: #fff;
            overflow: hidden;
            border-radius: 50%;
            justify-content: center;
            align-items: center;
        }
        .img {
            width: 120rpx;
            height: 120rpx;
            display: block;
        }
        .text {
            flex: 1;
            padding-left: 40rpx;
        }
        .name {
            font-size: 32rpx;
            line-height: 48rpx;
            font-weight: 700;
            color: #fff;
        }
        .tel {
            font-size: 28rpx;
            color: #fff;
            line-height: 48rpx;
        }
    }
    &-flex {
        background-image: linear-gradient(40deg, #ededfc, #f6fafe);
        border-radius: 16rpx;
        padding: 40rpx;
        margin: -40rpx $zzk-margin 0;
        position: relative;
        z-index: 2;
        .item {
            align-items: center;
            flex: 1;
        }
        .label {
            font-size: 28rpx;
            line-height: 56rpx;
            color: #999;
        }
        .value {
            font-size: 36rpx;
            line-height: 56rpx;
        }
    }
    &-title {
        margin: 40rpx $zzk-margin 0;
        .tit {
            font-size: 32rpx;
            line-height: 48rpx;
            font-weight: 700;
        }
    }
    &-menu {
        margin: 20rpx $zzk-margin 0;
        flex-wrap: wrap;
        .item {
            width: 25%;
            align-items: center;
            margin-bottom: 24rpx;
        }
        .image {
            justify-content: center;
            align-items: center;
            width: 80rpx;
            height: 80rpx;
        }
        .imgbox {
            background-color: rgb(164,111,255, 0.1);
            border-radius: 50%;
            justify-content: center;
            align-items: center;
            width: 68rpx;
            height: 68rpx;
        }
        .img {
            width: 80rpx;
            height: 80rpx;
            &.img2 {
                width: 48rpx;
                height: 48rpx;
            }
        }
        .txt {
            font-size: 24rpx;
            line-height: 48rpx;
            color: #666;
            margin-top: 8rpx;
        }
    }
}
</style>